<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>统计图表</title>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
        <script type="text/javascript">
            let myChart = echarts.init(document.querySelector('#main'));
            let option = {
                title: {
                    text: '年度违章统计'
                },
                tooltip: {},
                legend: {
                    data: ['违章总数', '已受理数量']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [
                    {
                        name: '总数',
                        type: 'bar',
                        data: []
                    },
                    {
                        name: '已受理',
                        type: 'bar',
                        data: []
                    }
                ]
            }
            fetch('/bar/').then(resp => resp.json()).then(json => {
                option.xAxis.data = json.years
                option.series[0].data = json.totals
                option.series[1].data = json.dealts
                myChart.setOption(option)
            })
        </script>
    </body>
</html>